<%--
  Created by IntelliJ IDEA.
  User: zhuhongyu
  Date: 2022/6/19
  Time: 14:53
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1786038_m62pqneyrzf.css">
    <title>绵阳城市学院宿舍管理系统</title>
    <link rel="icon" href="images/3.icon">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html {
            height: 100%;
        }

        body {
            height: 100%;
            font-family: JetBrains Mono Medium;
            display: flex;
            align-items: center;
            justify-content: center;

            background: url('images/1.jpg') no-repeat;
            background-size: 100% 100%;
        }
        .form-wrapper {
            width: 300px;
            background-color: rgba(255, 255, 255, .8);
            color: #fff;
            border-radius: 2px;
            padding: 50px;
        }
        .form-wrapper .header {
            text-align: center;
            font-size: 35px;
            text-transform: uppercase;
            line-height: 100px;
            color: black;
        }

        .form-wrapper .input-wrapper input {
            background-color: #f2f2f2;
            border: 0;
            width: 100%;
            text-align: center;
            font-size: 15px;
            color: black;
            outline: none;

        }

        .form-wrapper .input-wrapper input::placeholder {
            text-transform: uppercase;
        }

        .form-wrapper .input-wrapper .border-wrapper {
            background-image: linear-gradient(to right, #e8198b, #0eb4dd);
            width: 100%;
            height: 50px;
            margin-bottom: 20px;
            border-radius: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .form-wrapper .input-wrapper .border-wrapper .border-item {
            height: calc(100% - 4px);
            width: calc(100% - 4px);
            border-radius: 30px;
        }

        .form-wrapper .action {
            display: flex;
            justify-content: center;
            margin-top: 10px;
        }

        .form-wrapper .action .btn {
            width: 60%;
            text-transform: uppercase;
            border: 2px solid #0e92b3;
            text-align: center;
            line-height: 50px;
            border-radius: 30px;
            cursor: pointer;
        }
        .form-wrapper .action .btn input{
            width: 100%;
            text-transform: uppercase;
            border: 2px solid #0e92b3;
            text-align: center;
            line-height: 50px;
            border-radius: 30px;
            cursor: pointer;
            opacity: 0.5;
        }
        .form-wrapper .action .btn:hover {
            background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
        }

        .form-wrapper .icon-wrapper {
            text-align: center;
            width: 60%;
            margin: 20px auto 0;
            border-top: 1px dashed rgb(146, 146, 146);
            padding: 20px;
        }

        .form-wrapper .icon-wrapper i {
            font-size: 20px;
            color: rgb(187, 187, 187);
            cursor: pointer;
            border: 1px solid #fff;
            padding: 5px;
            border-radius: 20px;
        }

        .form-wrapper .icon-wrapper i:hover {
            background-color: #0e92b3;
        }
        #oper_select{

            height: calc(46px  - 4px);
            width: calc( 300px - 4px);
            border-radius: 30px;
        }
    </style>
</head>

<body>
<div class="form-wrapper">
    <div class="header">
        寝室管理系统
    </div>
    <form action="login" method="post">
    <div class="input-wrapper">
        <span style="font-size: 5px;color: red;margin-left: 20px">${usernameError}</span>
        <div class="border-wrapper">
            <input type="text" name="username"  placeholder="请输入账号" class="border-item" autocomplete="off">
        </div>
        <span style="font-size: 5px;color: red;margin-left: 20px">${passwordError}</span>
        <div class="border-wrapper">
            <input type="password" name="password" placeholder="请输入密码" class="border-item" autocomplete="off">
        </div>
    </div>
    <select id="oper_select" style="background-color: rgb(41, 45, 62);color: #f2f2f2; background-image: linear-gradient(to right, #e8198b, #0eb4dd);">
        <option value="0">请选择角色</option>
        <option value="1">寝室管理员</option>
        <option value="2">辅导员</option>
        <option value="3">学生助理</option>
        <option value="4">监管者登录</option>
    </select>
    <div class="action">
        <div class="btn"><input type="submit" name="提交" class="submit"></div>
    </div>
    <div class="icon-wrapper">
        <i class="iconfont icon-weixin"></i>
        <i class="iconfont icon-qq"></i>
        <i class="iconfont icon-git"></i>
     </div>
    </form>
</div>
</body>
<script>
        var myselect = document.getElementById("oper_select")
        var btn=document.querySelector('.btn')
         btn.onclick=function () {
            var index=myselect.selectedIndex
           localStorage.setItem("value",myselect.options[index].value)
        }
</script>
</html>